<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>版本更新 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* 主内容区域 */
        .update-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 更新卡片 */
        .update-card {
            background: white;
            border-radius: 24px;
            box-shadow: 0 15px 50px rgba(37, 117, 252, 0.15);
            padding: 40px 30px;
            text-align: center;
            max-width: 500px;
            width: 100%;
            position: relative;
            overflow: hidden;
            z-index: 1;
            margin-bottom: 30px;
        }
        
        .update-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
        
        .update-card::after {
            content: "";
            position: absolute;
            top: -100px;
            right: -100px;
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
            border-radius: 50%;
            z-index: -1;
        }
        
        .app-logo {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            border-radius: 24px;
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 40px;
            box-shadow: 0 10px 20px rgba(37, 117, 252, 0.2);
        }
        
        .app-name {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .app-version {
            font-size: 18px;
            color: #7f8c8d;
            margin-bottom: 30px;
        }
        
        .version-badge {
            display: inline-block;
            padding: 6px 15px;
            background: linear-gradient(135deg, #ff9a00, #ff6b00);
            color: white;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            margin-top: 10px;
        }
        
        .update-title {
            font-size: 22px;
            font-weight: 700;
            color: #2575fc;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .update-title i {
            font-size: 28px;
        }
        
        .update-list {
            text-align: left;
            margin-bottom: 30px;
        }
        
        .update-item {
            display: flex;
            gap: 12px;
            margin-bottom: 15px;
            padding: 12px 15px;
            background: #f8fbff;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .update-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.1);
        }
        
        .update-icon {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #2575fc, #6a11cb);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
            margin-top: 3px;
        }
        
        .update-content {
            flex: 1;
        }
        
        .update-content h4 {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .update-content p {
            font-size: 14px;
            color: #7f8c8d;
            line-height: 1.5;
        }
        
        .size-info {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .size-info span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 更新按钮 */
        .update-btn {
            display: inline-block;
            padding: 16px 45px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(37, 117, 252, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .update-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 25px rgba(37, 117, 252, 0.4);
        }
        
        .update-btn:active {
            transform: translateY(-2px);
        }
        
        .update-btn::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20px;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.6s;
        }
        
        .update-btn:hover::after {
            left: 120%;
        }
        
        /* 更新进度 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-top: 20px;
            display: none;
        }
        
        .progress-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .progress-bar {
            height: 12px;
            background: #f0f5ff;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
            border-radius: 10px;
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .progress-stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            font-size: 14px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 版本历史 */
        .version-history {
            width: 100%;
            max-width: 500px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-top: 20px;
        }
        
        .history-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .version-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .version-item:last-child {
            border-bottom: none;
        }
        
        .version-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .version-name {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .version-date {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .version-content {
            font-size: 14px;
            color: #7f8c8d;
            padding-left: 10px;
            border-left: 3px solid #e0e6ff;
            margin-left: 5px;
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .update-card {
                padding: 30px 20px;
            }
            
            .app-logo {
                width: 80px;
                height: 80px;
                font-size: 32px;
            }
            
            .app-name {
                font-size: 24px;
            }
            
            .update-title {
                font-size: 20px;
            }
            
            .update-btn {
                padding: 14px 35px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="javascript:history.go(-1);" class="back">
                <span></span>
            </a> 
            <div class="top_tit">版本更新</div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="update-container">
        <!-- 更新卡片 -->
        <div class="update-card">
            <div class="app-logo">
                <i class="fas fa-brain"></i>
            </div>
            
            <div class="app-name">快答答题</div>
            <div class="app-version">新版本: v1.2 <span class="version-badge">推荐更新</span></div>
            
            <div class="update-title">
                <i class="fas fa-sync-alt"></i>
                发现新版本
            </div>
            
            <div class="update-list">
                <div class="update-item">
                    <div class="update-icon">
                        <i class="fas fa-bug"></i>
                    </div>
                    <div class="update-content">
                        <h4>问题修复</h4>
                        <p>修复了答题过程中偶发的闪退问题，提升应用稳定性</p>
                    </div>
                </div>
                
                <div class="update-item">
                    <div class="update-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="update-content">
                        <h4>性能优化</h4>
                        <p>优化应用启动速度，减少30%加载时间，答题更流畅</p>
                    </div>
                </div>
                
                <div class="update-item">
                    <div class="update-icon">
                        <i class="fas fa-palette"></i>
                    </div>
                    <div class="update-content">
                        <h4>界面升级</h4>
                        <p>全新设计个人中心界面，信息展示更直观，操作更便捷</p>
                    </div>
                </div>
                
                <div class="update-item">
                    <div class="update-icon">
                        <i class="fas fa-gift"></i>
                    </div>
                    <div class="update-content">
                        <h4>新增功能</h4>
                        <p>添加"学习计划"功能，帮助用户系统性地提升知识水平</p>
                    </div>
                </div>
            </div>
            
            <div class="size-info">
                <span><i class="fas fa-download"></i> 大小: 42.5MB</span>
                <span><i class="fas fa-clock"></i> 预计时间: 1分钟</span>
            </div>
            
            <button class="update-btn" id="updateBtn">
                <i class="fas fa-cloud-download-alt"></i> 立即更新
            </button>
        </div>
        
        <!-- 更新进度 -->
        <div class="progress-container" id="progressContainer">
            <div class="progress-title">
                <i class="fas fa-sync fa-spin"></i> 正在更新中...
            </div>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-info">
                <span>已下载: <span id="downloaded">0MB</span></span>
                <span>剩余时间: <span id="timeLeft">1分钟</span></span>
            </div>
            <div class="progress-stats">
                <div class="stat-item">
                    <i class="fas fa-tachometer-alt"></i> 速度: <span id="downloadSpeed">0 KB/s</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-percentage"></i> 进度: <span id="progressPercent">0%</span>
                </div>
            </div>
        </div>
        
        <!-- 版本历史 -->
        <div class="version-history">
            <div class="history-title">
                <i class="fas fa-history"></i> 最近更新
            </div>
            
            <div class="version-item">
                <div class="version-header">
                    <div class="version-name">v1.1.5</div>
                    <div class="version-date">2023-09-15</div>
                </div>
                <div class="version-content">
                    新增10个专业题库，优化排行榜算法，修复已知问题
                </div>
            </div>
            
            <div class="version-item">
                <div class="version-header">
                    <div class="version-name">v1.1.0</div>
                    <div class="version-date">2023-08-10</div>
                </div>
                <div class="version-content">
                    增加好友对战功能，添加成就系统，优化界面设计
                </div>
            </div>
            
            <div class="version-item">
                <div class="version-header">
                    <div class="version-name">v1.0.8</div>
                    <div class="version-date">2023-07-05</div>
                </div>
                <div class="version-content">
                    提升答题稳定性，修复积分显示问题，优化推送通知
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const updateBtn = document.getElementById('updateBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressFill = document.getElementById('progressFill');
            const downloadedEl = document.getElementById('downloaded');
            const timeLeftEl = document.getElementById('timeLeft');
            const downloadSpeedEl = document.getElementById('downloadSpeed');
            const progressPercentEl = document.getElementById('progressPercent');
            
            // 更新按钮点击事件
            updateBtn.addEventListener('click', function() {
                // 隐藏按钮，显示进度条
                updateBtn.style.display = 'none';
                progressContainer.style.display = 'block';
                
                // 模拟更新过程
                let progress = 0;
                const totalSize = 42.5; // MB
                let speed = 1024; // KB/s
                let downloaded = 0;
                
                const updateInterval = setInterval(() => {
                    // 随机速度变化
                    speed = Math.max(800, Math.min(1500, speed + (Math.random() - 0.5) * 200));
                    
                    // 计算下载量 (0.1秒增加)
                    const increment = (speed * 0.1) / 1024; // 转换为MB
                    downloaded = Math.min(downloaded + increment, totalSize);
                    progress = (downloaded / totalSize) * 100;
                    
                    // 更新UI
                    progressFill.style.width = progress + '%';
                    downloadedEl.textContent = downloaded.toFixed(1) + 'MB';
                    downloadSpeedEl.textContent = Math.round(speed) + ' KB/s';
                    progressPercentEl.textContent = Math.round(progress) + '%';
                    
                    // 计算剩余时间
                    const remaining = totalSize - downloaded;
                    const timeLeft = remaining / (speed / 1024); // 秒
                    const minutes = Math.floor(timeLeft / 60);
                    const seconds = Math.floor(timeLeft % 60);
                    timeLeftEl.textContent = `${minutes}分${seconds}秒`;
                    
                    // 完成更新
                    if (progress >= 100) {
                        clearInterval(updateInterval);
                        progressContainer.innerHTML = `
                            <div style="text-align: center; padding: 20px 0;">
                                <div style="font-size: 60px; color: #34c759; margin-bottom: 20px;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <h3 style="font-size: 22px; color: #2c3e50; margin-bottom: 10px;">
                                    更新完成！
                                </h3>
                                <p style="font-size: 16px; color: #7f8c8d; margin-bottom: 25px;">
                                    新版本已成功安装，请重启应用体验全新功能
                                </p>
                                <button class="update-btn" onclick="location.reload()">
                                    <i class="fas fa-redo"></i> 重启应用
                                </button>
                            </div>
                        `;
                    }
                }, 100);
            });
        });
    </script>
</body>
</html>